<template>
    <div class="titleContainer">
        <div class="titleHead" v-if="!mapMainTitle">
            <img :style="{ marginLeft: imgMargin ? '1.1vw' : '' }" :src="imgUrl" alt="Image"
                style="vertical-align: middle;">
            <div class="titleName">{{ titleName }}</div>
        </div>

        <div class="titleHead" v-if="mapMainTitle">
            <div v-if="mapMainTitle" class="titleName" @click="$emit('mainTitleClick')">{{ mapMainTitle }}</div>
            <img v-if="titleName" src="@/views/riskBigScreen/bigScreen/rightIcon.png" alt="Image"
                style="margin:0 0.25vw;vertical-align: middle;">
            <div class="titleName">{{ titleName }}</div>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    props: {
        imgUrl: {
            type: String,
            default: require('@/views/riskBigScreen/bigScreen/pageTitleBj.png')
        },
         titleName: {
            type: String,
            default: ''
        },

        imgMargin: {
            type: Boolean,
            default: true
        },
        mapMainTitle: {
            type: String,
            default: ''
        },
    },
    data() {
        return {};
    },
    computed: {},
    watch: {},
    created() {

    },
    mounted() {

    },
    methods: {

    },
    beforeDestroy() { },
    activated() { },
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类 
.hostBodyHalf{
    .titleContainer{
        height: calc(5vh  - 10px);
        .titleHead{
            top: calc(1vh - 4px);
        }
    }
}
.titleContainer {
    position: relative;
    display: flex;
    align-items: center;
    /* 垂直居中对齐 */
    margin-left: 0.5208vw;
    height: 5vh;

    .titleHead {
        display: flex;
        align-items: center;
        position: absolute;
        top: 1vh;

        img {
            height: 3vh;
        }

        .titleName {
            padding-left: 0.5vw;
            font-feature-settings: 'liga' off, 'clig' off;
            text-shadow: 0 0.16vw 0.16vw #00265f4d;
            font-family: "Alimama ShuHeiTi";
            font-size: 1.2vw;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            letter-spacing: 0.06vw;
            background: linear-gradient(180deg, #FFF 51.85%, #53B5FD 83.33%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }
}
</style>